<script setup>
import {reactive, ref} from 'vue'
import V3Emoji from 'vue3-emoji'
import useArticleStore from '@/stores/article/index.js'
import {ElMessage} from 'element-plus'
import {useRoute} from 'vue-router'
import useLoginStore from '@/stores/user/index.js'
import router from '@/router/index.js'

const loginStore = useLoginStore()

const textareaParent = reactive({
  comment: '',
  newsId: ''
})

const textarea = reactive({
  comment: '',
  newsId: '',
  replyId: '',
  replyComment: ''
})

const textareaChildren = reactive({
  comment: '',
  newsId: '',
  replyId: '',
  replyComment: ''
})
const route = useRoute()
const newsId = route.query.id
textarea.newsId = newsId
textareaChildren.newsId = newsId
textareaParent.newsId = newsId

const articleStore = useArticleStore()
articleStore.getFirstListAction(newsId)
//结构评论数据

const clickEmoji = (val) => {
  textarea.comment += val
}

//查看更多评论
const currentIndexView = ref()
let allChildrenComment = ref()

const lookBtn = (index, commentId) => {
  allChildrenComment.value = commentId
  currentIndexView.value = index
  //查询子级评论
  articleStore.getCommentListAction(newsId, commentId)
}

//直接评论一级
const commentParentBtn = async () => {
  //判断是否登录
  if (!loginStore.token) {
    //提示用户登录
    await router.push('/home')
    loginStore.isShow = true
    return
  }
  await articleStore.addComment(textareaParent)
  //再次调用查询接口
  await articleStore.getFirstListAction(newsId)

  ElMessage.success('评论成功')

  //清除原先数据
  Object.assign(textareaParent, {
    comment: ''
  })
}

//评论一级回复
const commentBtn = async () => {
  //判断是否登录
  if (!loginStore.token) {
    //提示用户登录
    await router.push('/home')
    loginStore.isShow = true
    return
  }

  await articleStore.addComment(textarea)
  await articleStore.getCommentListAction(newsId, textarea.replyId)

  ElMessage.success('评论成功')

  //清除原先数据
  Object.assign(textarea, {
    comment: '',
    replyComment: ''
  })
}

//评论子级回复
const commentChildrenBtn = async () => {
  await articleStore.addComment(textareaChildren)
  await articleStore.getCommentListAction(newsId, allChildrenComment.value)
  ElMessage.success('评论成功')
  //清除原先数据
  Object.assign(textareaChildren, {
    comment: '',
    replyComment: ''
  })
}

//评论回复框显示
const currentIndex = ref(-1)
//评论框子级
const currentChildrenIndex = ref(-1)
const responseBtn = (index, commentId) => {
  currentIndex.value = index
  textarea.replyId = commentId
  currentChildrenIndex.value = -1
}

const responseChildrenBtn = (index, commentId) => {
  currentChildrenIndex.value = index
  textareaChildren.replyId = commentId
  currentIndex.value = -1
}
</script>

<template>
  <div class="emoji">
    <el-input
        v-model="textareaParent.comment"
        style="width: 500px"
        :autosize="{ minRows: 2, maxRows: 4 }"
        type="textarea"
        placeholder="请说点什么吧..."
    />
    <div class="content">
      <V3Emoji @click-emoji="clickEmoji" :recent="true"/>
      <el-button type="primary" @click="commentParentBtn" style="margin-right: 200px">评论</el-button>
    </div>

    <!--    v1评论列表-->
    <ul class="comments-list" style="margin-top: 40px">
      <template v-for="(item, index) in articleStore.commentList">
        <li class="item" style="margin-bottom: 40px">
          <img :src="item.image"/>
          <div class="info">
            <p style="margin-bottom: 10px">{{ item.name }}</p>
            <p style="margin-bottom: 15px">
              {{ item.comment }}
            </p>
            <!--            回复-->
            <div class="reply">
              <p style="margin-bottom: 15px; cursor: pointer" @click="responseBtn(index, item.id)">
                回复
              </p>
              <div
                  class="dialog-response"
                  style="margin-bottom: 10px"
                  v-if="currentIndex === index"
              >
                <el-input
                    v-model="textarea.replyComment"
                    style="width: 500px"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea"
                    placeholder="请说点什么吧..."
                />
                <div class="content">
                  <V3Emoji @click-emoji="clickEmoji" :recent="true"/>
                  <el-button type="primary" @click="commentBtn">评论</el-button>
                </div>
              </div>
            </div>

            <!--查看全部回复-->
            <div class="check-reply">
              <p
                  @click="lookBtn(index, item.id)"
                  v-if="item.children"
                  v-show="currentIndexView !== index"
              >
                查看全部回复
              </p>

              <!--全部回复人信息-->
              <template
                  v-for="(itemChildren, indexChildren) in articleStore.commentTwo"
                  :key="indexChildren"
              >
                <div
                    class="reply-person"
                    v-if="currentIndexView === index"
                    style="margin-bottom: 40px"
                >
                  <img :src="itemChildren.image" style="margin-bottom: 10px"/>
                  <div class="reply-info">
                    <p style="margin-bottom: 10px">{{ itemChildren.name }}</p>
                    <p>
                      <span class="reply-comment">{{ itemChildren.comment }}</span>
                      <span style="color: #0e408c">//@</span>
                      <span class="target-user" style="color: #0e408c">{{
                          itemChildren.replyName
                        }}</span>
                      <span>:</span>
                      <span class="target-comment" style="margin-left: 5px">{{
                          itemChildren.replyComment
                        }}</span>
                    </p>
                    <p
                        style="margin-top: 20px"
                        @click="responseChildrenBtn(indexChildren, itemChildren.id)"
                    >
                      回复
                    </p>
                    <div
                        class="dialog-response"
                        style="margin-bottom: 10px"
                        v-if="currentChildrenIndex === indexChildren"
                    >
                      <el-input
                          v-model="textareaChildren.replyComment"
                          style="width: 400px"
                          :autosize="{ minRows: 2, maxRows: 4 }"
                          type="textarea"
                          placeholder="请说点什么吧..."
                      />
                      <div class="content">
                        <V3Emoji @click-emoji="clickEmoji" :recent="true"/>
                        <el-button type="primary" @click="commentChildrenBtn">评论</el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </li>
      </template>
    </ul>
  </div>
</template>

<style scoped>
.emoji {
  .content {
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-button {
      font-weight: 700;
      width: 50px;
      cursor: pointer;
    }
  }

  .children {
    margin-top: 10px;
  }

  .response {
    margin: 0 5px;
  }

  .user {
    color: deepskyblue;
  }

  .look-comment {
    margin-top: 5px;
    cursor: pointer;

    &:hover {
      color: #f04142;
    }
  }

  .parent-comment {
    margin-bottom: 30px;
  }

  .parent-response {
    margin: 10px 0;

    &:hover {
      cursor: pointer;
      color: #f04142;
    }
  }
}

.comments-list {
  .item {
    display: flex;

    img {
      margin-right: 10px;
      border-radius: 50%;
      width: 34px;
      height: 34px;
    }
  }

  .reply-person {
    display: flex;
  }
}
</style>
